
<template>
    <el-select
    v-model="valueChild"
    @change="selectChange"
    @focus="initData"
    :multiple="multiple"
    :collapse-tags="collapseTags"
    :filterable="filterable"
    :clearable="clearable"
    :filter-method="setHightLight"
    :placeholder="placeholder"
    popper-class="key-high-select"
    style="width: 100%;"
    :popper-append-to-body="false"
    :size="size"
    >
        <el-checkbox-group v-model="valueChild">
            <el-option
            v-for="(item,index) in dataListShow"
            :key="index"
            :label="item[labelName]"
            :value="item[valueName]">
                <!-- <div v-html="item.showLabel"></div> -->
                <!-- <el-checkbox :label="item[valueName]" :id="randomNum + index" @change="valueChange(item[valueName])"/> -->
                <el-checkbox :label="item[valueName]" :for="randomNum + index"/>
                <label class="show-label-content" :id="randomNum + index" v-html="item.showLabel"></label>
            </el-option>
        </el-checkbox-group>
    </el-select>
</template>
<script>
export default {
    data() {
        return {
            dataListShow: [],
            valueChild: this.value,
            randomNum: Math.floor(Math.random() * 1000000)
        }
    },
    computed: {
        dataListCopy(){
            return this.dataList.map(item => {
                item.showLabel = item[this.labelName]
                return item
            })
        }
    },
    watch: {
        value(newVal){
            // 重置时将数据
            this.valueChild = newVal;
        }
    },
    props: {
        value: [Array,String],
        dataList: {
            required: true,
            typeof: Array
        },
        collapseTags: {
            required: false,
            typeof: Boolean,
            default: false
        },
        multiple: {
            required: false,
            typeof: Boolean,
            default: false
        },
        filterable: {
            required: false,
            typeof: Boolean,
            default: false
        },
        clearable: {
            required: false,
            typeof: Boolean,
            default: false
        },
        placeholder: {
            required: false,
            typeof: String,
            default: "请选择"
        },
        valueName: {
            required: false,
            default: "value",
            typeof: String
        },
        labelName: {
            required: false,
            default: "label",
            typeof: String
        },
        size: {
            required: false,
            typeof: String
        }

    },
    methods: {
        // 设置高亮
        setHightLight(keyword) {
            let newArr = JSON.parse(JSON.stringify(this.dataListCopy))
            if (newArr && newArr.length > 0 && keyword) {
                newArr = newArr.filter((item) => {
                    let reg = new RegExp(keyword, "g");
                    let replaceString = `<span style='color: #FF6A6C;'>${keyword.trim()}</span>`;
                    if (item[this.labelName].match(reg)) {
                        item.showLabel = item[this.labelName].replace(reg,replaceString);
                        return item;
                    }
                });
                this.dataListShow = newArr;
            }
            // 空返回原数组
            if (!keyword) {
                this.dataListShow = this.dataListShow = JSON.parse(JSON.stringify(this.dataListCopy))
            }
        },
        // 选择时将选择列表的数据还原回没有过滤时的状态并通知父组件更新
        selectChange() {
            this.dataListShow = this.dataListShow = JSON.parse(JSON.stringify(this.dataListCopy))
            this.$emit('input',this.valueChild);
        },
        // 初始值
        initData(){
            this.dataListShow = JSON.parse(JSON.stringify(this.dataListCopy))
        },
        // 当点击列表时，没有label不能同步更新checkbox
        // valueChange(value){
            // let index = this.valueChild.indexOf(value);
            // if(index > -1){
            //     this.valueChild.splice(index,1)
            // }else{
            //     this.valueChild.push(value)
            // }
            // this.dataListShow = this.dataListShow = JSON.parse(JSON.stringify(this.dataListCopy))
            // this.$emit('input',this.valueChild);
        // }
    }
}
</script>
<style lang="scss">
.key-high-select{
    border: none !important;
    max-width: 100%;
    .el-select-dropdown__item.selected::after{
       display: none;
    }
    .el-select-dropdown__item.selected.hover,
    .el-select-dropdown__item.hover{
        background-color: rgba(255,106,108,0.1) !important;
    }
    .el-checkbox .el-checkbox__label{
        display: none;
    }
    .el-checkbox__inner{
        border-radius: 4px;
    }
    .el-checkbox__inner:hover{
        border-color: #C0C4CC;
    }
    .show-label-content{
        margin-left: 2px;
        font-family: Microsoft YaHei, PingFangSC, Source Han Sans SC;
        font-weight: 400;
    }
    .el-select-dropdown__wrap{
        max-height: 320px !important;
    }
    .is-vertical .el-scrollbar__thumb{
        background: #DCDFE6 !important;
    }

}

</style>
<style scoped lang="scss">
/deep/.el-tag {
        height: 20px;
        line-height: 20px;
        margin: 2px 0px 2px 6px !important;
        background: #f5f7fa;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        color: #606266;
        .el-icon-close {
            color: #fff;
            top: 1px !important;
        }
        .el-select__tags-text{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
        }
    }
/deep/.el-select-dropdown.is-multiple .el-select-dropdown__item{
    padding-right: 12px;
}
/deep/.el-checkbox {
    margin-right: unset;
}
/deep/.el-select__tags-text{
    max-width: 120px;
}
@media screen and (max-width:1350px) {
    /deep/.el-select__tags-text{
        max-width: 80px;
    }
}
</style>
